<!DOCTYPE html>
<html style='font-size: 30px;'>
<head>
	<meta charset='utf-8' />
	<title>计费时钟</title>
</head>
<body>
	<p id='download'>
		网页下载的时间是：
		<span id='download-time'></span>
	</p>
	<p id='now'>
		时钟：
		<span id='now-time'></span>
	</p>
	<p id='continue'>
		页面持续时间：
		<span class='hour'>0</span> 时
		<span class='min'>0</span> 分
		<span class='second'>0</span> 秒
	</p>
	<div>
		单价：每分钟 <strong id='unitPrice'>1</strong> 元
	</div>
	<div>
		总计费：
		<span id='totalPrice'>0</span>
		元
	</div>
	<label for='price' style='font-size: 0.6rem;'>修改价格:</label>
	<input type='type' id='price'/>
	<button id='sure'>确定</button>
<script type="text/javascript">
	window.onload = function(){
		var time = (function(){			
					var startTime = 0,
						nowTime = 0,
						now = document.getElementById('now-time'),
						continued = {
							hour: document.querySelector('.hour'),
							min: document.querySelector('.min'),
							second: document.querySelector('.second'),
						},
						totalPrice = document.getElementById('totalPrice'),
						unitPrice = document.getElementById('unitPrice');
						worker = new Worker('worker.js');

					worker.postMessage(['initTime']);
					worker.onmessage = function(event) {
						startTime = event.data;
						document.getElementById('download-time')
								.innerHTML = startTime.year + '年' + 
											startTime.mon + '月' +
											startTime.date + '日' + 
											startTime.hour + '时' +
											startTime.min + '分' +
											startTime.sec + '秒';
						now.innerHTML = startTime.hour + '时' +
										startTime.min + '分' +
										startTime.sec + '秒';
					}

					//改变时间
					setInterval(function(){
						worker.postMessage(['checkTime']);
						worker.onmessage = function(event) {
							nowTime = event.data;
							now.innerHTML = nowTime.hour + '时' +
										nowTime.min + '分' +
										nowTime.sec + '秒';
							worker.postMessage(['continuedTime',startTime,nowTime]);
							worker.onmessage = function(event) {
								continuedTime(event.data);
							};
						}
					},1000)

					//计算持续时间
					function continuedTime(data){
						continued.hour.innerHTML = data.hour;
						continued.min.innerHTML = data.min;
						continued.second.innerHTML = data.sec;
						calculateMoney(continued.hour.innerHTML,continued.min.innerHTML);
					}

					//计算总价钱
					function calculateMoney(hour,min){
						totalPrice.innerHTML = (parseInt(hour) * 60 + parseInt(min)) * parseInt(unitPrice.innerHTML);
					}

					return calculateMoney;

				})();

		//改变单价
		(function(){
			var btn = document.getElementById('sure'),
				price = document.getElementById('price'),
				hour = document.querySelector('.hour'),
				min = document.querySelector('.min');
			btn.addEventListener('click',function(e){
				var pattern = /^\d{1,3}$/;
				e.preventDefault();
				if(pattern.test(price.value)){
					unitPrice.innerHTML = price.value;
					time(hour.innerHTML,min.innerHTML);
				}else{
					alert('请输入三位数的数字！');
				}
			})
		})()

	}
</script>
</body>
</html>